<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <BaseInfo :info="info" type="edit"></BaseInfo>
      <CareInfo :info="info" @formDataChange="formDataChangeHandle" @careModeChange="careModeChangeHandle" @on-success="getDetail"></CareInfo>
      <Care :care-mode="careMode" :info="info" :care-info="careInfo" @on-success="getDetail"></Care>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import BaseInfo from '../components/baseInfo'
import CareInfo from '../../components/careInfo'
import Care from '../../components/care'
import { careTaskDetail } from '@/api/guestCare'
export default {
  name: 'CustomerHander',
  components: {
    ContentWrap,
    BaseInfo,
    CareInfo,
    Care
  },
  data() {
    return {
      info: {},
      careMode: [], // 关怀方式
      careInfo: {}
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getDetail()
    }
  },
  methods: {
    careModeChangeHandle(v) {
      this.careMode = v
    },
    // 关怀信息发生变化
    formDataChangeHandle(v) {
      this.careInfo = v
    },
    // 获取详情
    getDetail() {
      const id = this.$route.query.id
      careTaskDetail(id).then(res => {
        this.info = res.data
      })
    }
  }
}
</script>
<style lang='scss' module>
.wrap{
.title{
  color: rgba(0,0,0,0.85);
  font-size: 16px;
  font-weight: 700;
}
}
</style>
